<template>
  <div class="status-panel">
    <!-- 标题 -->
    <div class="panel-header">
      <h3 class="panel-title">多屏监控</h3>
    </div>
    <!-- 内容 -->
    <div class="panel-content">
      <div class="panel-video-box">
        <!-- 多屏视频播放区域 -->
        <div class="multi-screen-container" :class="`layout-${screenLayout}`">
          <!-- 1屏布局 -->
          <template v-if="screenLayout === 1">
            <div class="video-player-container main-screen" :data-screen="1">
              <div v-if="screenDevices[0]" class="screen-header">
                <span class="device-name">{{
                  screenDevices[0].device_name ||
                  screenDevices[0].name ||
                  "未知设备"
                }}</span>
                <el-button size="small" type="danger" @click="clearScreen(0)"
                  >清除</el-button
                >
              </div>
              <WebRTCPlayer
                v-if="screenDevices[0] && screenDevices[0].videoUrl"
                :ref="(el) => { if (el) playerRefs[0] = el }"
                :url="screenDevices[0].videoUrl"
                :autoplay="true"
                :controls="true"
                :muted="true"
                @play="onVideoPlay"
                @error="onVideoError"
                @stateChange="onVideoStateChange"
              />
              <div v-else-if="screenDevices[0]" class="video-loading">
                <div class="loading-content">
                  <div class="loading-text">正在加载视频流...</div>
                  <div class="device-info">
                    {{
                      screenDevices[0].device_name ||
                      screenDevices[0].name ||
                      "未知设备"
                    }}
                  </div>
                  <div class="debug-info">
                    Debug: videoUrl = {{ screenDevices[0].videoUrl }}
                  </div>
                </div>
              </div>
              <div
                v-else
                class="video-placeholder"
                @click="selectDeviceForScreen(0)"
              >
                <div class="placeholder-content">
                  <img
                    src="@/assets/images/video_source.png"
                    alt="选择设备"
                    class="placeholder-image"
                  />
                </div>
              </div>
            </div>
          </template>

          <!-- 4屏布局 -->
          <template v-else-if="screenLayout === 4">
            <div
              class="video-player-container screen-item"
              v-for="(item, index) in 4"
              :key="index"
              :data-screen="index + 1"
            >
              <div v-if="screenDevices[index]" class="screen-header">
                <span class="device-name">{{
                  screenDevices[index].device_name ||
                  screenDevices[index].name ||
                  "未知设备"
                }}</span>
                <el-button
                  size="small"
                  type="danger"
                  @click="clearScreen(index)"
                  >清除</el-button
                >
              </div>
              <WebRTCPlayer
                v-if="screenDevices[index] && screenDevices[index].videoUrl"
                :ref="(el) => { if (el) playerRefs[index] = el }"
                :url="screenDevices[index].videoUrl"
                :autoplay="true"
                :controls="true"
                :muted="true"
                @play="onVideoPlay"
                @error="onVideoError"
                @stateChange="onVideoStateChange"
              />
              <div v-else-if="screenDevices[index]" class="video-loading">
                <div class="loading-content">
                  <div class="loading-text">正在加载视频流...</div>
                  <div class="device-info">
                    {{
                      screenDevices[index].device_name ||
                      screenDevices[index].name ||
                      "未知设备"
                    }}
                  </div>
                  <div class="debug-info">
                    Debug: videoUrl = {{ screenDevices[index].videoUrl }}
                  </div>
                </div>
              </div>
              <div
                v-else
                class="video-placeholder"
                @click="selectDeviceForScreen(index)"
              >
                <div class="placeholder-content">
                  <img
                    src="@/assets/images/video_source.png"
                    alt="选择设备"
                    class="placeholder-image"
                  />
                </div>
              </div>
            </div>
          </template>

          <!-- 9屏布局 -->
          <template v-else-if="screenLayout === 9">
            <div
              class="video-player-container screen-item"
              v-for="(item, index) in 9"
              :key="index"
              :data-screen="index + 1"
            >
              <div v-if="screenDevices[index]" class="screen-header">
                <span class="device-name">{{
                  screenDevices[index].device_name ||
                  screenDevices[index].name ||
                  "未知设备"
                }}</span>
                <el-button
                  size="small"
                  type="danger"
                  @click="clearScreen(index)"
                  >清除</el-button
                >
              </div>
              <WebRTCPlayer
                v-if="screenDevices[index] && screenDevices[index].videoUrl"
                :ref="(el) => { if (el) playerRefs[index] = el }"
                :url="screenDevices[index].videoUrl"
                :autoplay="true"
                :controls="true"
                :muted="true"
                @play="onVideoPlay"
                @error="onVideoError"
                @stateChange="onVideoStateChange"
              />
              <div v-else-if="screenDevices[index]" class="video-loading">
                <div class="loading-content">
                  <div class="loading-text">正在加载视频流...</div>
                  <div class="device-info">
                    {{
                      screenDevices[index].device_name ||
                      screenDevices[index].name ||
                      "未知设备"
                    }}
                  </div>
                  <div class="debug-info">
                    Debug: videoUrl = {{ screenDevices[index].videoUrl }}
                  </div>
                </div>
              </div>
              <div
                v-else
                class="video-placeholder"
                @click="selectDeviceForScreen(index)"
              >
                <div class="placeholder-content">
                  <img
                    src="@/assets/images/video_source.png"
                    alt="选择设备"
                    class="placeholder-image"
                  />
                </div>
              </div>
            </div>
          </template>
        </div>
        <!-- 视频播放区域 -->
        <!-- <div class="panel-video-top">
          <div class="screen-layout-controls">
            <div
              class="layout-btn"
              :class="{ active: screenLayout === 1 }"
              @click="switchLayout(1)"
            >
              <img
                :src="screenLayout === 1 ? oneScreenActIcon : oneScreenIcon"
                alt="1屏"
                class="layout-icon"
              />
            </div>
            <div
              class="layout-btn"
              :class="{ active: screenLayout === 4 }"
              @click="switchLayout(4)"
            >
              <img
                :src="screenLayout === 4 ? fourScreenActIcon : fourScreenIcon"
                alt="4屏"
                class="layout-icon"
              />
            </div>
            <div
              class="layout-btn"
              :class="{ active: screenLayout === 9 }"
              @click="switchLayout(9)"
            >
              <img
                :src="screenLayout === 9 ? nineScreenActIcon : nineScreenIcon"
                alt="9屏"
                class="layout-icon"
              />
            </div>
          </div>
        </div> -->
      </div>
      
      <!-- 底部控制区域 -->
      <div class="bottom-controls-container">
        <!-- 左侧：视频控制区域 -->
        <div class="video-controls">
          <!-- <el-button type="primary" @click="playAllVideos">播放全部</el-button> -->
          <el-button type="danger" @click="stopAllVideos">停止全部</el-button>
          <!-- <el-button type="warning" @click="clearAllScreens">清除全部</el-button> -->
          <!-- <span class="layout-status">当前布局: {{ screenLayout }}屏</span> -->
          <!-- <span class="default-screen">默认播放: 屏幕{{ defaultPlayScreenIndex + 1 }}</span> -->
          <!-- <el-button size="small" @click="setNextDefaultScreen">切换默认屏幕</el-button> -->
        </div>
        
        <!-- 右侧：屏幕布局控制 -->
        <div class="layout-controls">
          <div class="screen-layout-controls">
            <div
              class="layout-btn"
              :class="{ active: screenLayout === 1 }"
              @click="switchLayout(1)"
            >
              <img
                :src="screenLayout === 1 ? oneScreenActIcon : oneScreenIcon"
                alt="1屏"
                class="layout-icon"
              />
            </div>
            <div
              class="layout-btn"
              :class="{ active: screenLayout === 4 }"
              @click="switchLayout(4)"
            >
              <img
                :src="screenLayout === 4 ? fourScreenActIcon : fourScreenIcon"
                alt="4屏"
                class="layout-icon"
              />
            </div>
            <div
              class="layout-btn"
              :class="{ active: screenLayout === 9 }"
              @click="switchLayout(9)"
            >
              <img
                :src="screenLayout === 9 ? nineScreenActIcon : nineScreenIcon"
                alt="9屏"
                class="layout-icon"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import { ElMessage, ElButton } from "element-plus";
import WebRTCPlayer from "@/components/WebRTCPlayer.vue";
import { stopLiveStream } from "@/api/device";

// 导入布局图标
import oneScreenIcon from "@/assets/images/oneScreen.png";
import fourScreenIcon from "@/assets/images/fourScreen.png";
import nineScreenIcon from "@/assets/images/nineScreen.png";
import oneScreenActIcon from "@/assets/images/oneScreenAct.png";
import fourScreenActIcon from "@/assets/images/fourScreenAct.png";
import nineScreenActIcon from "@/assets/images/nineScreenAct.png";

// 响应式数据
const screenLayout = ref(1); // 默认1屏布局
const screenDevices = ref([]); // 每个屏幕对应的设备
const currentSelectingScreen = ref(null); // 当前正在选择设备的屏幕索引
const playerRefs = ref([]); // 播放器引用数组
const defaultPlayScreenIndex = ref(0); // 默认播放屏幕索引

// 初始化屏幕设备数组
const initScreenDevices = () => {
  const maxScreens = screenLayout.value;
  screenDevices.value = new Array(maxScreens).fill(null);
};

// 切换屏幕布局
const switchLayout = (layout) => {
  screenLayout.value = layout;
  initScreenDevices(); // 重新初始化设备数组
  ElMessage.success(`已切换到${layout}屏布局`);
};

// 为指定屏幕选择设备
const selectDeviceForScreen = (screenIndex) => {
  currentSelectingScreen.value = screenIndex;
  // 触发设备选择事件，通知父组件显示设备列表
  window.dispatchEvent(
    new CustomEvent("select-device-for-screen", {
      detail: { screenIndex },
    })
  );
};

// 设置屏幕设备
const setScreenDevice = (screenIndex, device, videoUrl, stopLiveParams = null) => {
  console.log(`设置屏幕${screenIndex + 1}设备:`, device, "视频地址:", videoUrl, "停止参数:", stopLiveParams);

  if (screenIndex >= 0 && screenIndex < screenDevices.value.length) {
    if (screenDevices.value[screenIndex]) {
      // 如果设备已存在，更新videoUrl和停止参数
      screenDevices.value[screenIndex].videoUrl = videoUrl;
      if (stopLiveParams) {
        screenDevices.value[screenIndex].stopLiveParams = stopLiveParams;
      }
      console.log(`更新屏幕${screenIndex + 1}视频地址:`, videoUrl);
      if (videoUrl) {
        ElMessage.success(`屏幕${screenIndex + 1}视频流已准备就绪`);
        console.log(
          `屏幕${screenIndex + 1}应该显示播放器，videoUrl:`,
          videoUrl
        );
      }
    } else {
      // 如果设备不存在，创建新的设备对象
      screenDevices.value[screenIndex] = {
        ...device,
        videoUrl: videoUrl,
        stopLiveParams: stopLiveParams
      };
      console.log(
        `创建屏幕${screenIndex + 1}设备对象:`,
        screenDevices.value[screenIndex]
      );
      ElMessage.success(
        `屏幕${screenIndex + 1}已设置设备: ${
          device.device_name || device.name || "未知设备"
        }`
      );
      if (videoUrl) {
        console.log(
          `屏幕${screenIndex + 1}应该显示播放器，videoUrl:`,
          videoUrl
        );
      }
    }

    // 强制更新视图
    screenDevices.value = [...screenDevices.value];
  } else {
    console.error(
      `屏幕索引${screenIndex}超出范围，当前布局: ${screenLayout.value}屏`
    );
  }
};

// 清除指定屏幕
const clearScreen = (screenIndex) => {
  if (screenIndex >= 0 && screenIndex < screenDevices.value.length) {
    screenDevices.value[screenIndex] = null;
    ElMessage.success(`屏幕${screenIndex + 1}已清除`);
  }
};

// 清除所有屏幕
const clearAllScreens = () => {
  screenDevices.value = new Array(screenDevices.value.length).fill(null);
  ElMessage.success("已清除所有屏幕");
};

// 播放所有视频
const playAllVideos = () => {
  const players = getAllPlayers();
  players.forEach((player) => {
    if (player && typeof player.play === "function") {
      player.play();
    }
  });
  ElMessage.success("正在播放所有视频");
};

// 停止所有视频
const stopAllVideos = async () => {
  const players = getAllPlayers();
  
  // 先停止前端播放器
  players.forEach((player) => {
    if (player && typeof player.stop === "function") {
      player.stop();
    }
  });
  
  // 然后调用后端接口停止直播流
  const stopPromises = [];
  screenDevices.value.forEach((device, index) => {
    if (device && device.videoUrl && device.stopLiveParams) {
      const stopPromise = stopLiveStream(device.stopLiveParams)
        .then(() => {
          // console.log(`屏幕${index + 1}直播流已停止`);
        })
        .catch((error) => {
          console.error(`停止屏幕${index + 1}直播流失败:`, error);
        });
      stopPromises.push(stopPromise);
    }
  });
  
  // 清除所有设备的videoUrl，让播放器组件卸载
  screenDevices.value.forEach((device, index) => {
    if (device && device.videoUrl) {
      device.videoUrl = null;
    }
  });
  
  // 等待所有停止操作完成
  try {
    await Promise.allSettled(stopPromises);
    ElMessage.success("已停止所有视频");
  } catch (error) {
    console.error("停止视频流时出现错误:", error);
    ElMessage.warning("视频已停止，但部分后端流可能仍在运行");
  }
};

// 获取所有播放器的引用
const getAllPlayers = () => {
  const players = [];
  const maxScreens = screenLayout.value;

  for (let i = 0; i < maxScreens; i++) {
    if (screenDevices.value[i] && screenDevices.value[i].videoUrl) {
      const player = playerRefs.value[i];
      if (player) {
        players.push(player);
      }
    }
  }

  return players;
};

// 监听直播流准备事件
const handleLiveStreamReady = (event) => {
  const { device, streamUrl, screenIndex, stopLiveParams } = event.detail;

  console.log("StatusPanel收到流地址:", streamUrl, "屏幕索引:", screenIndex);
  console.log("设备信息:", device);
  console.log("停止播放参数:", stopLiveParams);

  // 如果没有指定屏幕索引，使用默认播放屏幕
  const targetScreenIndex =
    screenIndex !== undefined ? screenIndex : defaultPlayScreenIndex.value;

  // 设置指定屏幕的设备
  setScreenDevice(targetScreenIndex, device, streamUrl, stopLiveParams);
};

// 监听设备选择事件
const handleDeviceSelected = (event) => {
  const { device, screenIndex } = event.detail;
  console.log("收到设备选择事件:", device, "屏幕索引:", screenIndex);

  // 如果没有指定屏幕索引，使用默认播放屏幕
  const targetScreenIndex =
    screenIndex !== undefined ? screenIndex : defaultPlayScreenIndex.value;

  if (device) {
    // 先设置设备信息，等待真实的流地址
    setScreenDevice(targetScreenIndex, device, null);
    ElMessage.success(`设备已选择，正在获取视频流...`);
    console.log(`屏幕${targetScreenIndex + 1}设备信息已设置，等待视频流...`);
  }
};

// 视频播放事件处理
const onVideoPlay = (session) => {
  console.log("视频开始播放，会话信息:", session);
};

const onVideoError = (error) => {
  console.error("视频播放错误:", error);
  ElMessage.error(`视频播放错误: ${error.message || "未知错误"}`);
};

const onVideoStateChange = (state) => {
  console.log("视频状态变化:", state);
};

// 切换默认播放屏幕
const setNextDefaultScreen = () => {
  const currentIndex = defaultPlayScreenIndex.value;
  const nextIndex = (currentIndex + 1) % screenLayout.value;
  defaultPlayScreenIndex.value = nextIndex;
  ElMessage.success(`已切换默认播放屏幕为: 屏幕${nextIndex + 1}`);
};

onMounted(() => {
  initScreenDevices();
  window.addEventListener("live-stream-ready", handleLiveStreamReady);
  window.addEventListener("device-selected", handleDeviceSelected);
});

onUnmounted(() => {
  window.removeEventListener("live-stream-ready", handleLiveStreamReady);
  window.removeEventListener("device-selected", handleDeviceSelected);
});
</script>

<style lang="scss" scoped>
.status-panel {
  width: 1380px;
  height: 903px;
  background: url("@/assets/images/video_airline_bg.png") no-repeat center
    center;
  background-size: 100% 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: flex-start;

  .panel-header {
    width: 100%;
    height: 38px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;

    .panel-title {
      font-size: 18px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(
        180deg,
        rgba(238, 238, 238, 1) 0%,
        rgba(238, 238, 238, 1) 40%,
        rgba(59, 135, 202, 1) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));
      position: relative;
      bottom: -2px;
    }
  }

  .panel-content {
    flex: 1;
    width: 100%;
    padding: 30px 16px 16px;
    box-sizing: border-box;

    .panel-video-top {
      // margin-bottom: 16px;
      margin-bottom: 8px;
      padding-right: 16px;
      box-sizing: border-box;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 2px;
      line-height: 18px;
      vertical-align: top;
      background: linear-gradient(
        180deg,
        rgba(238, 238, 238, 1) 0%,
        rgba(238, 238, 238, 1) 40%,
        rgba(59, 135, 202, 1) 100%
      );
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, 0.5));

      .screen-layout-controls {
        display: flex;
        gap: 8px;
        margin-top: 12px;
        justify-content: flex-end;

        .layout-btn {
          background: rgba(2, 92, 109, 0.8);
          border: 1px solid rgba(20, 109, 142, 1);
          border-radius: 4px;
          padding: 6px 8px;
          cursor: pointer;
          transition: all 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;

          &:hover {
            background: rgba(25, 167, 181, 0.6);
            border-color: rgba(25, 167, 181, 1);
            transform: translateY(-1px);
          }

          &.active {
            background: linear-gradient(
              180deg,
              rgba(25, 167, 181, 1) 0%,
              rgba(2, 48, 60, 1) 53.09%,
              rgba(25, 167, 181, 1) 100%
            );
            border-color: rgba(20, 109, 142, 1);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
          }

          .layout-icon {
            width: 24px;
            height: 24px;
            object-fit: contain;
          }
        }
      }
    }

    .panel-video-box {
      width: 100%;
      height: 720px;
      background: rgba(7, 44, 54, 1);
      border: 1px solid rgba(90, 120, 140, 1);
      border-radius: 8px;
      overflow: hidden;
      position: relative;

      .multi-screen-container {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        padding: 2px;
        box-sizing: border-box;

        &.layout-1 {
          .video-player-container {
            width: 100%;
            height: 100%;
          }
        }

        &.layout-4 {
          .screen-item {
            width: calc(50% - 1px);
            height: calc(50% - 1px);
            border: 1px solid rgba(90, 120, 140, 0.5);
            border-radius: 4px;
            overflow: hidden;
            position: relative;

            &::before {
              content: "屏幕 " attr(data-screen);
              position: absolute;
              top: 4px;
              left: 4px;
              background: rgba(0, 0, 0, 0.7);
              color: rgba(255, 255, 255, 0.8);
              padding: 2px 6px;
              border-radius: 2px;
              font-size: 10px;
              z-index: 10;
            }
          }
        }

        &.layout-9 {
          .screen-item {
            width: calc(33.333% - 1.33px);
            height: calc(33.333% - 1.33px);
            border: 1px solid rgba(90, 120, 140, 0.5);
            border-radius: 4px;
            overflow: hidden;
            position: relative;

            &::before {
              content: "屏幕 " attr(data-screen);
              position: absolute;
              top: 2px;
              left: 2px;
              background: rgba(0, 0, 0, 0.7);
              color: rgba(255, 255, 255, 0.8);
              padding: 1px 4px;
              border-radius: 2px;
              font-size: 8px;
              z-index: 10;
            }
          }
        }

        .video-player-container {
          width: 100%;
          height: 100%;
          position: relative;

          .screen-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 32px;
            background: rgba(0, 0, 0, 0.7);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 8px;
            z-index: 10;

            .device-name {
              color: rgba(255, 255, 255, 0.9);
              font-size: 12px;
              font-weight: 500;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              max-width: 70%;
            }

            .el-button {
              padding: 2px 6px;
              font-size: 10px;
              height: 20px;
            }
          }
        }

        .video-placeholder {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(2, 92, 109, 0.1);
          cursor: pointer;
          transition: all 0.3s ease;

          &:hover {
            background: rgba(25, 167, 181, 0.2);
            border: 2px dashed rgba(25, 167, 181, 0.5);
          }

          .placeholder-content {
            text-align: center;
            color: rgba(255, 255, 255, 0.4);
            transition: color 0.3s ease;

            &:hover {
              color: rgba(255, 255, 255, 0.8);
            }

            .placeholder-icon {
              font-size: 24px;
              margin-bottom: 8px;
            }

            .placeholder-text {
              font-size: 12px;
            }

            .placeholder-image {
              width: 80px;
              height: 80px;
              object-fit: contain;
              opacity: 0.6;
              transition: opacity 0.3s ease;

              &:hover {
                opacity: 0.8;
              }
            }
          }
        }

        .video-loading {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(2, 92, 109, 0.2);

          .loading-content {
            text-align: center;
            color: rgba(255, 255, 255, 0.8);

            .loading-text {
              font-size: 14px;
              margin-bottom: 8px;
              color: rgba(25, 167, 181, 1);
            }

            .device-info {
              font-size: 12px;
              color: rgba(255, 255, 255, 0.6);
            }

            .debug-info {
              font-size: 10px;
              color: rgba(255, 255, 255, 0.4);
              margin-top: 4px;
            }
          }
        }
      }

      .video-placeholder {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .placeholder-content {
          text-align: center;
          color: rgba(255, 255, 255, 0.6);

          .placeholder-icon {
            font-size: 64px;
            margin-bottom: 20px;
          }

          .placeholder-text {
            font-size: 18px;
            margin-bottom: 10px;
          }

          .placeholder-subtext {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.4);
          }
        }
      }
    }

    .bottom-controls-container {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 20px;
      
      .video-controls {
        display: flex;
        align-items: center;
        gap: 10px;

        .video-status {
          color: #ffffff;
          font-size: 14px;
          margin-left: 20px;
        }

        .layout-status {
          color: #ffffff;
          font-size: 14px;
          margin-left: 20px;
          background: rgba(25, 167, 181, 0.2);
          padding: 4px 8px;
          border-radius: 4px;
          border: 1px solid rgba(25, 167, 181, 0.5);
        }

        .default-screen {
          color: #ffffff;
          font-size: 14px;
          margin-left: 20px;
          background: rgba(25, 167, 181, 0.2);
          padding: 4px 8px;
          border-radius: 4px;
          border: 1px solid rgba(25, 167, 181, 0.5);
        }
      }
      
      .layout-controls {
        .screen-layout-controls {
          display: flex;
          gap: 8px;
          align-items: center;

          .layout-btn {
            background: rgba(2, 92, 109, 0.8);
            border: 1px solid rgba(20, 109, 142, 1);
            border-radius: 4px;
            padding: 6px 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;

            &:hover {
              background: rgba(25, 167, 181, 0.6);
              border-color: rgba(25, 167, 181, 1);
              transform: translateY(-1px);
            }

            &.active {
              background: linear-gradient(
                180deg,
                rgba(25, 167, 181, 1) 0%,
                rgba(2, 48, 60, 1) 53.09%,
                rgba(25, 167, 181, 1) 100%
              );
              border-color: rgba(20, 109, 142, 1);
              box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            }

            .layout-icon {
              width: 24px;
              height: 24px;
              object-fit: contain;
            }
          }
        }
      }
    }
  }
}
</style>
